<template>
  <div>
    <popup v-model="show" position="bottom" max-height="80%" @on-hide="ok()">
      <div class="weui-dialog__hd showContent">
        <strong class="weui-dialog__title">审批历史</strong>
      </div>
      <div class="weui-dialog__bd">
        <timeline>
          <timeline-item v-for="(opinion,index) of opinionList" :key="index">
            <h4 :class="!opinion.approveTime ?'recent':''">【{{ opinion.taskName }}】{{ opinion.approverName }}（{{ getByStatus(opinion.status) }}）</h4>
            <p v-if="opinion.approveTime"> {{ opinion.approveTime }}</p>
            <p v-if="opinion.approveTime"> 意见：{{ opinion.opinion }}</p>
          </timeline-item>
        </timeline>
      </div>
      <div class="weui-dialog__ft">
        <a class="weui-dialog__btn weui-dialog__btn_default" style="text-align: center;" v-on:click="ok()">关闭</a>
      </div>
    </popup>
  </div>
</template>

<script>
import Vue from 'vue'
import {Timeline, TimelineItem} from 'vux'

Vue.component('timeline', Timeline)

export default {
  props: ['passConf', 'showDialog'],
  data: function () {
    return {
      opinionList: [],
      opinionStatusKeyMap: {},
      show: false
    }
  },
  methods: {
    ok: function () {
      this.show = false;
      this.$emit('cancel', null);
    },
    getByStatus: function (status) {
      return this.opinionStatusKeyMap[status] || status;
    }
  },
  created: function () {
    var defer = Vue.baseService.postForm(Vue.__ctx + "/bpm/instance/getOpinion", {instId: this.passConf.instanceId});
    var vm = this;
    var post = this.abTools.getEnum("com.dstz.bpm.api.constant.OpinionStatus");
    post.then((data) => {
      for (var key in data) {
        this.opinionStatusKeyMap[data[key].key] = data[key].value;
      }

      Vue.tools.getResultData(defer, function (data) {
        vm.opinionList = data;
        vm.opinionList.reverse();
      })
    })


    this.show = this.showDialog;
  },
  components: {
    Timeline, TimelineItem
  }
}


</script>

<style lang="less" scoped>
.recent {
  color: rgb(4, 190, 2)
}

p {
  color: #888;
  font-size: 0.8rem;
}

h4 {
  color: #666;
  font-weight: normal;
}

</style>
